<template>
	<div class="content">
		<div class="content-header">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>XXX</el-breadcrumb-item>
				<el-breadcrumb-item>
					<b>${description}</b>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content-body">
			<el-scrollbar>
				<div class="panel">
					<el-form :model="${entityName?uncap_first}SearchForm" ref="${entityName?uncap_first}SearchForm" inline label-width="100px">
						<el-row>
<#list searchFields as po>
	<#if po.listQuery == 'interval' || po.listQuery == 'between'>
		<#if po.componentType == 'date'>
							<el-col :md="${searchColumnWidth*2}">
								<el-form-item label="${po.description}">
									<div style="display: flex; justify-content: space-between; justify-items: center;">
										<el-date-picker type="date" placeholder="选择日期" v-model="${entityName?uncap_first}SearchForm.${po.propertyName}Start" style="width:130px;"></el-date-picker>
										<div style="margin: 0 5px;"> ~ </div>
										<el-date-picker type="date" placeholder="选择日期" v-model="${entityName?uncap_first}SearchForm.${po.propertyName}End" style="width:130px;"></el-date-picker>
									</div>
								</el-form-item>
							</el-col>
		<#else>
							<el-col :md="${searchColumnWidth*2}">
								<el-form-item label="${po.description}">
									<div style="display: flex; justify-content: space-between; justify-items: center;">
										<el-input v-model="${entityName?uncap_first}SearchForm.${po.propertyName}Start" style="width:100px;"></el-input>
										<div style="margin: 0 5px;"> ~ </div>
										<el-input v-model="${entityName?uncap_first}SearchForm.${po.propertyName}End" style="width:100px;"></el-input>
									</div>
								</el-form-item>
							</el-col>
		</#if>
	<#else>
		<#if po.componentType == 'date'>
							<el-col :md="${searchColumnWidth*2}">
								<el-form-item label="${po.description}">
									<el-date-picker type="date" placeholder="选择日期" v-model="${entityName?uncap_first}SearchForm.${po.propertyName}"></el-date-picker>
								</el-form-item>
							</el-col>
		<#elseif po.componentType == 'radio' || po.componentType == 'checkbox' || po.componentType == 'select'>
							<el-col :md="${searchColumnWidth*2}">
								<el-form-item label="${po.description}">
									<el-select v-model="${entityName?uncap_first}SearchForm.${po.propertyName}" placeholder="全部">
										<el-option v-for="item in ${po.propertyName}List" :key="item.id" :label="item.name" :value="item.id" ></el-option>
									</el-select>
								</el-form-item>
							</el-col>
		<#else>
							<el-col :md="${searchColumnWidth*2}">
								<el-form-item label="${po.description}">
									<el-input v-model="${entityName?uncap_first}SearchForm.${po.propertyName}"></el-input>
								</el-form-item>
							</el-col>
		</#if>
	</#if>
	<#if (po_index + 1) % searchColumnNum == 0 && po_has_next>
						</el-row>
						<el-row>
	</#if>
</#list>
						</el-row>
						<div class="search-btn">
							<div class="search-btn-left">
								<el-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button>
							</div>
							<div class="search-btn-right">
								<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
								<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
							</div>
						</div>
					</el-form>
					<el-table :data="tableData" border stripe style="width: 100%">
<#if tableConfig.isCheckbox?if_exists?html == 'Y'>
						<el-table-column type="selection" width="50" align="center"></el-table-column>
</#if>
						<el-table-column label="序号" width="60" header-align="left" align="center">
							<template slot-scope="scope">{{scope.$index + 1 + (tableCurrentPage-1)*tablePageSize}}</template>
						</el-table-column>
<#list fields as po>
	<#if po.listShow?if_exists?html == 'Y'>
						<el-table-column label="${po.description}" prop="${po.propertyName}"></el-table-column>
	</#if>
</#list>
						<el-table-column label="操作" min-width="150px">
							<template slot-scope="scope">
								<el-button type="warning" @click="handleUpdate(scope.row.${pkPropertyName})">编辑</el-button>
								<el-button type="danger" @click="handleDelete(scope.row.${pkPropertyName})">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page.sync="tableCurrentPage" :page-sizes="[10, 20, 30, 50]"
						:page-size.sync="tablePageSize" layout="total, jumper, prev, pager, next, sizes"
						:total="tableTotal"></el-pagination>
				</div>
			</el-scrollbar>
			<${entityName} ref="${entityName?uncap_first}"></${entityName}>
		</div>
	</div>
</template>

<script>
import ${entityName} from "./${entityName}";
export default {
	components: {
		${entityName}
	},
	data() {
		return {
			${entityName?uncap_first}SearchForm: {
<#list searchFields as po>
	<#if po.listQuery == 'interval' || po.listQuery == 'between'>
				${po.propertyName}Start: null,
				${po.propertyName}End: null<#if po_has_next>,</#if>
	<#else>
				${po.propertyName}: null<#if po_has_next>,</#if>
	</#if>
</#list>
			},
<#list searchFields as po>
	<#if po.componentType == 'radio' || po.componentType == 'checkbox' || po.componentType == 'select'>
			${po.propertyName}List: [
				{id:"1",name:"选项1"},
				{id:"2",name:"选项2"},
				{id:"3",name:"选项3"}
			],
	</#if>
</#list>
			tableTotal: 0,
			tableCurrentPage: 1,
			tablePageSize: 10,
			tableData: []
		};
	},
	mounted() {
		this.getTableData(this.tableCurrentPage, this.tablePageSize);
	},
	methods: {
		handleSizeChange(val) {
			this.getTableData(this.tableCurrentPage, val);
		},
		handleCurrentChange(val) {
			this.getTableData(val, this.tablePageSize);
		},
		handleSearch() {
			this.getTableData(this.tableCurrentPage, this.tablePageSize);
		},
		getTableData(page, pageSize) {

			let pageParams = '?page=' + page + '&rows=' + pageSize;

			this.$api.post('/${entityName?uncap_first}/findByPage' + pageParams, this.${entityName?uncap_first}SearchForm).then(
				response => {
					this.tableData = response.data.list;
					this.tableTotal = response.data.total;
				}
			);
		},
		resetForm() {
			this.${entityName?uncap_first}SearchForm = {
<#list searchFields as po>
	<#if po.listQuery == 'interval' || po.listQuery == 'between'>
				${po.propertyName}Start: null,
				${po.propertyName}End: null<#if po_has_next>,</#if>
	<#else>
				${po.propertyName}: null<#if po_has_next>,</#if>
	</#if>
</#list>
			};
			this.getTableData(1, this.tablePageSize);
		},
		handleAdd() {
			this.$refs.${entityName?uncap_first}.initForm();
		},
		handleUpdate(${pkPropertyName}) {
			this.$refs.${entityName?uncap_first}.initForm(${pkPropertyName});
		},
		handleDelete(${pkPropertyName}) {
			this.$confirm("确认删除?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				this.$api.post('/${entityName?uncap_first}/delete', {${pkPropertyName}:${pkPropertyName}}).then(response => {
					if (response.success) {
						this.$message.success(response.message);
						this.handleSearch();
					} else {
						this.$message.error(response.message);
					}
				});
			}).catch(() => {});
		}
	}
};
</script>
